<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div>
      <el-form :model="query" inline>
        <el-form-item label="标题">
          <el-input v-model="query.title" clearable />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="query.userName" clearable />
        </el-form-item>
        <el-form-item label="教师名">
          <el-input v-model="query.teacherName" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select style="width: 140px" v-model="query.status" clearable>
            <el-option label="已支付" value="1" />
            <el-option label="批改中" value="2" />
            <el-option label="批改完成" value="3" />
          </el-select>
        </el-form-item>
        <!-- 时间 -->
        <el-form-item label="创建时间">
          <el-date-picker
            value-format="YYYY-MM-DD HH:mm:ss"
            v-model="query.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getSlListData">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 20px">
        <!-- 分配教师 -->
        <el-button type="primary" @click="handleFetchTeacher">分配教师</el-button>
      </div>
      <el-table
        border
        @selection-change="handleSelectionChange"
        stripe
        :data="slList"
        style="width: 100%"
      >
        <!-- 复选框 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="teacherName" label="教师名">
          <template #default="scope">
            <el-tag v-if="scope.row.teacherName" type="primary">{{ scope.row.teacherName }}</el-tag>
            <el-tag v-else type="warning">未分配</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :color="getStatusColor(scope.row.status)" effect="dark">{{
              statusType[scope.row.status]
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template #default="scope">
            <span>{{ formatTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        v-model:current-page="query.pageNum"
        v-model:page-size="query.pageSize"
        :total="total"
        @size-change="getSlListData"
        @current-change="getSlListData"
        background
        layout="->,total, sizes, prev, pager, next, jumper"
      />
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="teacherDialogVisible" title="分配教师" width="80%">
      <div class="teacher-list" v-if="teacherList.length > 0">
        <el-radio-group v-model="checkedTeachers">
          <el-radio
            style="margin: 10px"
            border
            v-for="teacher in teacherList"
            :key="teacher.userId"
            :label="teacher.userId"
          >
            {{ teacher.showName }}
          </el-radio>
        </el-radio-group>
      </div>
      <div v-else>
        <el-empty description="申论批改部门未配置教师" />
      </div>
      <template #footer>
        <el-button type="primary" @click="surefenPei">确定</el-button>
      </template>
    </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
import { getSlList, getTeacherList, assignTeacher } from '../api/slfp';
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { statusType, getStatusColor } from '../utils';

const teacherDialogVisible = ref(false);
const teacherList = ref<any>([]);
const checkedTeachers = ref(null);
const slList = ref([]);
const total = ref(0);
const query = ref({
  pageNum: 1,
  pageSize: 10,
  title: '',
  userName: '',
  teacherName: '',
  status: '',
  createTime: '',
});
const selectedRows = ref<any>([]);
//分配教师
const handleFetchTeacher = () => {
  // 先判断是否选中列表复选框
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要分配的批改申论');
    return;
  }
  teacherDialogVisible.value = true;
};
const handleBatch = row => {
  console.log(row);
};
const getSlListData = async () => {
  let startTime = '';
  let endTime = '';
  if (query.value.createTime) {
    startTime = query.value.createTime[0];
    endTime = query.value.createTime[1];
  }
  const res = await getSlList({
    ...query.value,
    startTime,
    endTime,
  });
  slList.value = res.data.records;
  total.value = res.data.total;
};
const handleSelectionChange = val => {
  selectedRows.value = val;
};
//确定分配
const surefenPei = async () => {
  if (!checkedTeachers.value) {
    ElMessage.warning('请选择要分配的教师');
    return;
  }
  console.log(checkedTeachers.value);
  console.log(selectedRows.value);

  let data = {
    teacherId: checkedTeachers.value,
    testIds: selectedRows.value.map(item => item.id),
  };
  const res: any = await assignTeacher(data);
  if (res.code === 200) {
    ElMessage.success('分配成功');
    teacherDialogVisible.value = false;
    getSlListData();
  } else {
    ElMessage.error(res.message);
  }
};
onMounted(() => {
  getSlListData();
  getTeacherList().then(res => {
    console.log(res.data);
    // userStatus
    const newList = res.data.dataList.filter(item => item.userStatus !== 1);
    // 1916750601438367744
    const newList2 = newList.filter(item => item.deptId == '1916750601438367744');
    teacherList.value = newList2;
  });
});

const resetQuery = () => {
  query.value = {
    pageNum: 1,
    pageSize: 10,
    title: '',
    userName: '',
    teacherName: '',
    status: '',
    createTime: '',
  };
  getSlListData();
};
const formatTime = (time: string) => {
  return new Date(time).toLocaleString();
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
}
.teacher-list {
  display: flex;
  flex-wrap: wrap;
}
</style>
